import React, {Component} from 'react';
import $ from 'jquery';
import '../css/productService.css';
import {Consumer} from "../store";

import hand_img3 from '../image/hand_img3.png';
import hand_img5 from '../image/hand_img5.jpg';
import hand_img6 from '../image/hand_img6.jpg';
import o2o_img from '../image/o2o_img.png';
import o2o_img2 from '../image/o2o_img2.jpg';
import o2o_img3 from '../image/o2o_img3.jpg';
import big_data from '../image/big_data.png'

class ProductService extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            currentMenu: 1,
            ZHMenu: 1
        };
    }

    render() {
        const {show, currentMenu, ZHMenu} = this.state;
        return (
            <div style={{overflow: 'hidden'}}>
                <div className={show ? "nav-scroll show" : "nav-scroll"}>
                    <div className={show ? "nav-scroll-list show" : "nav-scroll-list"}>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(1)}>智慧物业</div>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(2)}>商业O2O</div>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(3)}>智慧物联</div>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(4)}>公共服务</div>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(5)}>社区活动</div>
                        <div className="nav-scroll-item" onClick={() => this.handleScrollTop(6)}>大数据</div>
                    </div>
                </div>
                <div className="productServiceHeader">
                </div>
                <div className="productItemMenuList clearfix">
                    <div className={currentMenu === 1 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(1)}
                         onClick={() => this.handleScrollTop(1)}
                    >
                        <div
                            className={currentMenu === 1 ? "productItemMenuItemLogo productItemMenuItemLogo1 active" : "productItemMenuItemLogo productItemMenuItemLogo1"}>
                        </div>
                        <div
                            className={currentMenu === 1 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>智慧物业
                        </div>
                    </div>
                    <div className={currentMenu === 2 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(2)}
                         onClick={() => this.handleScrollTop(2)}
                    >
                        <div
                            className={currentMenu === 2 ? "productItemMenuItemLogo productItemMenuItemLogo2 active" : "productItemMenuItemLogo productItemMenuItemLogo2"}></div>
                        <div
                            className={currentMenu === 2 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>商业020
                        </div>
                    </div>
                    <div className={currentMenu === 3 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(3)}
                         onClick={() => this.handleScrollTop(3)}
                    >
                        <div
                            className={currentMenu === 3 ? "productItemMenuItemLogo productItemMenuItemLogo3 active" : "productItemMenuItemLogo productItemMenuItemLogo3"}></div>
                        <div
                            className={currentMenu === 3 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>智慧物联
                        </div>
                    </div>
                    <div className={currentMenu === 4 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(4)}
                         onClick={() => this.handleScrollTop(4)}
                    >
                        <div
                            className={currentMenu === 4 ? "productItemMenuItemLogo productItemMenuItemLogo4 active" : "productItemMenuItemLogo productItemMenuItemLogo4"}></div>
                        <div
                            className={currentMenu === 4 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>公共服务
                        </div>
                    </div>
                    <div className={currentMenu === 5 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(5)}
                         onClick={() => this.handleScrollTop(5)}
                    >
                        <div
                            className={currentMenu === 5 ? "productItemMenuItemLogo productItemMenuItemLogo5 active" : "productItemMenuItemLogo productItemMenuItemLogo5"}></div>
                        <div
                            className={currentMenu === 5 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>社区活动
                        </div>
                    </div>
                    <div className={currentMenu === 6 ? "productItemMenuItem active" : "productItemMenuItem"}
                         onMouseEnter={() => this.handleOnMouseEnter(6)}
                         onClick={() => this.handleScrollTop(6)}
                    >
                        <div
                            className={currentMenu === 6 ? "productItemMenuItemLogo productItemMenuItemLogo6 active" : "productItemMenuItemLogo productItemMenuItemLogo6"}></div>
                        <div
                            className={currentMenu === 6 ? "productItemMenuItemTitle active" : "productItemMenuItemTitle"}>大数据
                        </div>
                    </div>
                </div>

                <div className="productServiceContainer1">
                    <div className="normalContainer">
                        <div className="productServiceContainer1Left">
                            <div className="Container1LeftTitle">
                                <span className="Container1LeftTitleLogo"></span>
                                <div className="Container1LeftTitleContent">智慧物业</div>
                            </div>
                            <div className="containerLeftContent">
                                <div className="containerLeftMenu">
                                    <div
                                        className={ZHMenu === 1 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(1)}>住宅类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 2 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(2)}>园区类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 3 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(3)}>商城类社区
                                    </div>
                                </div>
                                <div
                                    className={ZHMenu === 1 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">在线缴费</div>
                                    <div className="containerLeftMenuContentText">物业费、水电费、停车费，当期往期，一键立清。</div>
                                    <div className="containerLeftMenuContentSubject">报修抢单</div>
                                    <div className="containerLeftMenuContentText">智能抢单提示，提高人力效能；报修流程可视可控，一切尽在掌握中。</div>
                                    <div className="containerLeftMenuContentSubject">业主信息</div>
                                    <div className="containerLeftMenuContentText">实时更新失效老旧信息，保证业主信息准确性。</div>
                                    <div className="containerLeftMenuContentSubject">社区公告</div>
                                    <div className="containerLeftMenuContentText">社区公告随时发送，大事小事一目了然。</div>
                                    <div className="containerLeftMenuContentSubject">物业人员工作流管理</div>
                                    <div className="containerLeftMenuContentText">工作流程规范化，全局掌握物业人员签到、工作中、待评价等工作状态。</div>
                                </div>
                                <div
                                    className={ZHMenu === 2 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">企业入驻</div>
                                    <div className="containerLeftMenuContentText">填资料传资质，超简单入驻申请，还可随时查看审批状态</div>
                                    <div className="containerLeftMenuContentSubject">孵化服务</div>
                                    <div className="containerLeftMenuContentText">入孵、咨询、融资一站式孵化服务，再也不用打印大堆资料</div>
                                    <div className="containerLeftMenuContentSubject">金融服务</div>
                                    <div className="containerLeftMenuContentText">融资、创投、产业基金多类型金融服务，满足企业自身经营需求</div>
                                    <div className="containerLeftMenuContentSubject">一卡通</div>
                                    <div className="containerLeftMenuContentText">一卡通在手，门禁、停车、物业缴费、园区购物，通通搞定</div>
                                    <div className="containerLeftMenuContentSubject">车位申请</div>
                                    <div className="containerLeftMenuContentText">在线申请——确认——付款，三步走轻松申请车位</div>
                                </div>
                                <div
                                    className={ZHMenu === 3 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">免费WIFI接入</div>
                                    <div className="containerLeftMenuContentText">免密码一键接入WIFI，轻松获取用户</div>
                                    <div className="containerLeftMenuContentSubject">人流热点监控</div>
                                    <div className="containerLeftMenuContentText">图表形式展现人流轨迹，哪人多哪人少，一目了然</div>
                                    <div className="containerLeftMenuContentSubject">LBS数据服务</div>
                                    <div className="containerLeftMenuContentText">利用LBS定位服务，给指定区域用户推送优惠信息</div>
                                    <div className="containerLeftMenuContentSubject">会员中心</div>
                                    <div className="containerLeftMenuContentText">全程记录会员消费轨迹，获取会员画像，配合商家个性化营销</div>
                                    <div className="containerLeftMenuContentSubject">招商租赁</div>
                                    <div className="containerLeftMenuContentText">随时发布招商租赁信息，一键预约看铺，快速简单</div>
                                    <div className="containerLeftMenuContentSubject">积分管理</div>
                                    <div className="containerLeftMenuContentText">积分获取权限多：签到积分、消费积分、分享积分…保持用户活性</div>
                                </div>
                            </div>
                        </div>
                        <div className="productServiceContainer1Right">
                            <img src={hand_img3} alt="hand_img3"
                                 className={ZHMenu === 1 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img5} alt="hand_img3"
                                 className={ZHMenu === 2 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img6} alt="hand_img3"
                                 className={ZHMenu === 3 ? "handleImgStyl active" : "handleImgStyl"}/>
                        </div>
                    </div>
                </div>

                <div className="productServiceContainer2">
                    <div className="normalContainer">
                        <div className="productServiceContainer1Left" style={{float: 'right'}}>
                            <div className="Container1LeftTitle">
                                <span className="Container1LeftTitleLogo"></span>
                                <div className="Container1LeftTitleContent">商业O2O</div>
                            </div>
                            <div className="containerLeftContent">
                                <div className="containerLeftMenu">
                                    <div
                                        className={ZHMenu === 1 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(1)}>住宅类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 2 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(2)}>园区类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 3 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(3)}>商城类社区
                                    </div>
                                </div>
                                <div
                                    className={ZHMenu === 1 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">在线缴费</div>
                                    <div className="containerLeftMenuContentText">物业费、水电费、停车费，当期往期，一键立清。</div>
                                    <div className="containerLeftMenuContentSubject">报修抢单</div>
                                    <div className="containerLeftMenuContentText">智能抢单提示，提高人力效能；报修流程可视可控，一切尽在掌握中。</div>
                                    <div className="containerLeftMenuContentSubject">业主信息</div>
                                    <div className="containerLeftMenuContentText">实时更新失效老旧信息，保证业主信息准确性。</div>
                                    <div className="containerLeftMenuContentSubject">社区公告</div>
                                    <div className="containerLeftMenuContentText">社区公告随时发送，大事小事一目了然。</div>
                                    <div className="containerLeftMenuContentSubject">物业人员工作流管理</div>
                                    <div className="containerLeftMenuContentText">工作流程规范化，全局掌握物业人员签到、工作中、待评价等工作状态。</div>
                                </div>
                                <div
                                    className={ZHMenu === 2 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">企业入驻</div>
                                    <div className="containerLeftMenuContentText">填资料传资质，超简单入驻申请，还可随时查看审批状态</div>
                                    <div className="containerLeftMenuContentSubject">孵化服务</div>
                                    <div className="containerLeftMenuContentText">入孵、咨询、融资一站式孵化服务，再也不用打印大堆资料</div>
                                    <div className="containerLeftMenuContentSubject">金融服务</div>
                                    <div className="containerLeftMenuContentText">融资、创投、产业基金多类型金融服务，满足企业自身经营需求</div>
                                    <div className="containerLeftMenuContentSubject">一卡通</div>
                                    <div className="containerLeftMenuContentText">一卡通在手，门禁、停车、物业缴费、园区购物，通通搞定</div>
                                    <div className="containerLeftMenuContentSubject">车位申请</div>
                                    <div className="containerLeftMenuContentText">在线申请——确认——付款，三步走轻松申请车位</div>
                                </div>
                                <div
                                    className={ZHMenu === 3 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">免费WIFI接入</div>
                                    <div className="containerLeftMenuContentText">免密码一键接入WIFI，轻松获取用户</div>
                                    <div className="containerLeftMenuContentSubject">人流热点监控</div>
                                    <div className="containerLeftMenuContentText">图表形式展现人流轨迹，哪人多哪人少，一目了然</div>
                                    <div className="containerLeftMenuContentSubject">LBS数据服务</div>
                                    <div className="containerLeftMenuContentText">利用LBS定位服务，给指定区域用户推送优惠信息</div>
                                    <div className="containerLeftMenuContentSubject">会员中心</div>
                                    <div className="containerLeftMenuContentText">全程记录会员消费轨迹，获取会员画像，配合商家个性化营销</div>
                                    <div className="containerLeftMenuContentSubject">招商租赁</div>
                                    <div className="containerLeftMenuContentText">随时发布招商租赁信息，一键预约看铺，快速简单</div>
                                    <div className="containerLeftMenuContentSubject">积分管理</div>
                                    <div className="containerLeftMenuContentText">积分获取权限多：签到积分、消费积分、分享积分…保持用户活性</div>
                                </div>
                            </div>
                        </div>
                        <div className="productServiceContainer1Right" style={{float: 'left', paddingLeft: 80}}>
                            <img src={o2o_img} alt="o2o_img"
                                 className={ZHMenu === 1 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={o2o_img2} alt="o2o_img2"
                                 className={ZHMenu === 2 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={o2o_img3} alt="o2o_img3"
                                 className={ZHMenu === 3 ? "handleImgStyl active" : "handleImgStyl"}/>
                        </div>
                    </div>
                </div>

                <div className="productServiceContainer1">
                    <div className="normalContainer">
                        <div className="productServiceContainer1Left">
                            <div className="Container1LeftTitle">
                                <span className="Container1LeftTitleLogo"></span>
                                <div className="Container1LeftTitleContent">智慧物联</div>
                            </div>
                            <div className="containerLeftContent">
                                <div className="containerLeftMenu">
                                    <div
                                        className={ZHMenu === 1 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(1)}>住宅类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 2 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(2)}>园区类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 3 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(3)}>商城类社区
                                    </div>
                                </div>
                                <div
                                    className={ZHMenu === 1 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">在线缴费</div>
                                    <div className="containerLeftMenuContentText">物业费、水电费、停车费，当期往期，一键立清。</div>
                                    <div className="containerLeftMenuContentSubject">报修抢单</div>
                                    <div className="containerLeftMenuContentText">智能抢单提示，提高人力效能；报修流程可视可控，一切尽在掌握中。</div>
                                    <div className="containerLeftMenuContentSubject">业主信息</div>
                                    <div className="containerLeftMenuContentText">实时更新失效老旧信息，保证业主信息准确性。</div>
                                    <div className="containerLeftMenuContentSubject">社区公告</div>
                                    <div className="containerLeftMenuContentText">社区公告随时发送，大事小事一目了然。</div>
                                    <div className="containerLeftMenuContentSubject">物业人员工作流管理</div>
                                    <div className="containerLeftMenuContentText">工作流程规范化，全局掌握物业人员签到、工作中、待评价等工作状态。</div>
                                </div>
                                <div
                                    className={ZHMenu === 2 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">企业入驻</div>
                                    <div className="containerLeftMenuContentText">填资料传资质，超简单入驻申请，还可随时查看审批状态</div>
                                    <div className="containerLeftMenuContentSubject">孵化服务</div>
                                    <div className="containerLeftMenuContentText">入孵、咨询、融资一站式孵化服务，再也不用打印大堆资料</div>
                                    <div className="containerLeftMenuContentSubject">金融服务</div>
                                    <div className="containerLeftMenuContentText">融资、创投、产业基金多类型金融服务，满足企业自身经营需求</div>
                                    <div className="containerLeftMenuContentSubject">一卡通</div>
                                    <div className="containerLeftMenuContentText">一卡通在手，门禁、停车、物业缴费、园区购物，通通搞定</div>
                                    <div className="containerLeftMenuContentSubject">车位申请</div>
                                    <div className="containerLeftMenuContentText">在线申请——确认——付款，三步走轻松申请车位</div>
                                </div>
                                <div
                                    className={ZHMenu === 3 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">免费WIFI接入</div>
                                    <div className="containerLeftMenuContentText">免密码一键接入WIFI，轻松获取用户</div>
                                    <div className="containerLeftMenuContentSubject">人流热点监控</div>
                                    <div className="containerLeftMenuContentText">图表形式展现人流轨迹，哪人多哪人少，一目了然</div>
                                    <div className="containerLeftMenuContentSubject">LBS数据服务</div>
                                    <div className="containerLeftMenuContentText">利用LBS定位服务，给指定区域用户推送优惠信息</div>
                                    <div className="containerLeftMenuContentSubject">会员中心</div>
                                    <div className="containerLeftMenuContentText">全程记录会员消费轨迹，获取会员画像，配合商家个性化营销</div>
                                    <div className="containerLeftMenuContentSubject">招商租赁</div>
                                    <div className="containerLeftMenuContentText">随时发布招商租赁信息，一键预约看铺，快速简单</div>
                                    <div className="containerLeftMenuContentSubject">积分管理</div>
                                    <div className="containerLeftMenuContentText">积分获取权限多：签到积分、消费积分、分享积分…保持用户活性</div>
                                </div>
                            </div>
                        </div>
                        <div className="productServiceContainer1Right">
                            <img src={hand_img3} alt="hand_img3"
                                 className={ZHMenu === 1 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img5} alt="hand_img3"
                                 className={ZHMenu === 2 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img6} alt="hand_img3"
                                 className={ZHMenu === 3 ? "handleImgStyl active" : "handleImgStyl"}/>
                        </div>
                    </div>
                </div>

                <div className="productServiceContainer2">

                    <div className="normalContainer">
                        <div className="productServiceContainer1Left" style={{float: 'right'}}>
                            <div className="Container1LeftTitle">
                                <span className="Container1LeftTitleLogo"></span>
                                <div className="Container1LeftTitleContent">公共服务</div>
                            </div>
                            <div className="containerLeftContent">
                                <div className="containerLeftMenu">
                                    <div
                                        className={ZHMenu === 1 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(1)}>住宅类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 2 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(2)}>园区类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 3 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(3)}>商城类社区
                                    </div>
                                </div>
                                <div
                                    className={ZHMenu === 1 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">在线缴费</div>
                                    <div className="containerLeftMenuContentText">物业费、水电费、停车费，当期往期，一键立清。</div>
                                    <div className="containerLeftMenuContentSubject">报修抢单</div>
                                    <div className="containerLeftMenuContentText">智能抢单提示，提高人力效能；报修流程可视可控，一切尽在掌握中。</div>
                                    <div className="containerLeftMenuContentSubject">业主信息</div>
                                    <div className="containerLeftMenuContentText">实时更新失效老旧信息，保证业主信息准确性。</div>
                                    <div className="containerLeftMenuContentSubject">社区公告</div>
                                    <div className="containerLeftMenuContentText">社区公告随时发送，大事小事一目了然。</div>
                                    <div className="containerLeftMenuContentSubject">物业人员工作流管理</div>
                                    <div className="containerLeftMenuContentText">工作流程规范化，全局掌握物业人员签到、工作中、待评价等工作状态。</div>
                                </div>
                                <div
                                    className={ZHMenu === 2 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">企业入驻</div>
                                    <div className="containerLeftMenuContentText">填资料传资质，超简单入驻申请，还可随时查看审批状态</div>
                                    <div className="containerLeftMenuContentSubject">孵化服务</div>
                                    <div className="containerLeftMenuContentText">入孵、咨询、融资一站式孵化服务，再也不用打印大堆资料</div>
                                    <div className="containerLeftMenuContentSubject">金融服务</div>
                                    <div className="containerLeftMenuContentText">融资、创投、产业基金多类型金融服务，满足企业自身经营需求</div>
                                    <div className="containerLeftMenuContentSubject">一卡通</div>
                                    <div className="containerLeftMenuContentText">一卡通在手，门禁、停车、物业缴费、园区购物，通通搞定</div>
                                    <div className="containerLeftMenuContentSubject">车位申请</div>
                                    <div className="containerLeftMenuContentText">在线申请——确认——付款，三步走轻松申请车位</div>
                                </div>
                                <div
                                    className={ZHMenu === 3 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">免费WIFI接入</div>
                                    <div className="containerLeftMenuContentText">免密码一键接入WIFI，轻松获取用户</div>
                                    <div className="containerLeftMenuContentSubject">人流热点监控</div>
                                    <div className="containerLeftMenuContentText">图表形式展现人流轨迹，哪人多哪人少，一目了然</div>
                                    <div className="containerLeftMenuContentSubject">LBS数据服务</div>
                                    <div className="containerLeftMenuContentText">利用LBS定位服务，给指定区域用户推送优惠信息</div>
                                    <div className="containerLeftMenuContentSubject">会员中心</div>
                                    <div className="containerLeftMenuContentText">全程记录会员消费轨迹，获取会员画像，配合商家个性化营销</div>
                                    <div className="containerLeftMenuContentSubject">招商租赁</div>
                                    <div className="containerLeftMenuContentText">随时发布招商租赁信息，一键预约看铺，快速简单</div>
                                    <div className="containerLeftMenuContentSubject">积分管理</div>
                                    <div className="containerLeftMenuContentText">积分获取权限多：签到积分、消费积分、分享积分…保持用户活性</div>
                                </div>
                            </div>
                        </div>
                        <div className="productServiceContainer1Right" style={{float: 'left', paddingLeft: 80}}>
                            <img src={o2o_img} alt="o2o_img"
                                 className={ZHMenu === 1 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={o2o_img2} alt="o2o_img2"
                                 className={ZHMenu === 2 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={o2o_img3} alt="o2o_img3"
                                 className={ZHMenu === 3 ? "handleImgStyl active" : "handleImgStyl"}/>
                        </div>
                    </div>
                </div>

                <div className="productServiceContainer1">
                    <div className="normalContainer">
                        <div className="productServiceContainer1Left">
                            <div className="Container1LeftTitle">
                                <span className="Container1LeftTitleLogo"></span>
                                <div className="Container1LeftTitleContent">社区活动</div>
                            </div>
                            <div className="containerLeftContent">
                                <div className="containerLeftMenu">
                                    <div
                                        className={ZHMenu === 1 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(1)}>住宅类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 2 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(2)}>园区类社区
                                    </div>
                                    <div
                                        className={ZHMenu === 3 ? "containerLeftMenuItem active" : "containerLeftMenuItem"}
                                        onClick={() => this.handleChooseZHMenu(3)}>商城类社区
                                    </div>
                                </div>
                                <div
                                    className={ZHMenu === 1 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">在线缴费</div>
                                    <div className="containerLeftMenuContentText">物业费、水电费、停车费，当期往期，一键立清。</div>
                                    <div className="containerLeftMenuContentSubject">报修抢单</div>
                                    <div className="containerLeftMenuContentText">智能抢单提示，提高人力效能；报修流程可视可控，一切尽在掌握中。</div>
                                    <div className="containerLeftMenuContentSubject">业主信息</div>
                                    <div className="containerLeftMenuContentText">实时更新失效老旧信息，保证业主信息准确性。</div>
                                    <div className="containerLeftMenuContentSubject">社区公告</div>
                                    <div className="containerLeftMenuContentText">社区公告随时发送，大事小事一目了然。</div>
                                    <div className="containerLeftMenuContentSubject">物业人员工作流管理</div>
                                    <div className="containerLeftMenuContentText">工作流程规范化，全局掌握物业人员签到、工作中、待评价等工作状态。</div>
                                </div>
                                <div
                                    className={ZHMenu === 2 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">企业入驻</div>
                                    <div className="containerLeftMenuContentText">填资料传资质，超简单入驻申请，还可随时查看审批状态</div>
                                    <div className="containerLeftMenuContentSubject">孵化服务</div>
                                    <div className="containerLeftMenuContentText">入孵、咨询、融资一站式孵化服务，再也不用打印大堆资料</div>
                                    <div className="containerLeftMenuContentSubject">金融服务</div>
                                    <div className="containerLeftMenuContentText">融资、创投、产业基金多类型金融服务，满足企业自身经营需求</div>
                                    <div className="containerLeftMenuContentSubject">一卡通</div>
                                    <div className="containerLeftMenuContentText">一卡通在手，门禁、停车、物业缴费、园区购物，通通搞定</div>
                                    <div className="containerLeftMenuContentSubject">车位申请</div>
                                    <div className="containerLeftMenuContentText">在线申请——确认——付款，三步走轻松申请车位</div>
                                </div>
                                <div
                                    className={ZHMenu === 3 ? "containerLeftMenuContent active" : "containerLeftMenuContent"}>
                                    <div className="containerLeftMenuContentSubject">免费WIFI接入</div>
                                    <div className="containerLeftMenuContentText">免密码一键接入WIFI，轻松获取用户</div>
                                    <div className="containerLeftMenuContentSubject">人流热点监控</div>
                                    <div className="containerLeftMenuContentText">图表形式展现人流轨迹，哪人多哪人少，一目了然</div>
                                    <div className="containerLeftMenuContentSubject">LBS数据服务</div>
                                    <div className="containerLeftMenuContentText">利用LBS定位服务，给指定区域用户推送优惠信息</div>
                                    <div className="containerLeftMenuContentSubject">会员中心</div>
                                    <div className="containerLeftMenuContentText">全程记录会员消费轨迹，获取会员画像，配合商家个性化营销</div>
                                    <div className="containerLeftMenuContentSubject">招商租赁</div>
                                    <div className="containerLeftMenuContentText">随时发布招商租赁信息，一键预约看铺，快速简单</div>
                                    <div className="containerLeftMenuContentSubject">积分管理</div>
                                    <div className="containerLeftMenuContentText">积分获取权限多：签到积分、消费积分、分享积分…保持用户活性</div>
                                </div>
                            </div>
                        </div>
                        <div className="productServiceContainer1Right">
                            <img src={hand_img3} alt="hand_img3"
                                 className={ZHMenu === 1 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img5} alt="hand_img3"
                                 className={ZHMenu === 2 ? "handleImgStyl active" : "handleImgStyl"}/>
                            <img src={hand_img6} alt="hand_img3"
                                 className={ZHMenu === 3 ? "handleImgStyl active" : "handleImgStyl"}/>
                        </div>
                    </div>
                </div>
                <div className="productServiceBottom">
                    <div style={{fontSize: 40}}>大数据</div>
                    <div style={{marginTop: 30, fontSize: 16}}>集成平台运营数据，丰富的图表展现形式，让运营可视可控</div>
                    <img src={big_data} alt="big_data" style={{marginTop: 60}}/>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} =this.props;
        dispatch({num:1});
        $(document).scrollTop(0);
        this.scrollHandler();
    };

    componentWillUnmount() {
        window.removeEventListener('scroll',this.scrollHandler.bind(this));
        this.setState = (count, callback) => {
            return;
        }
    }


    /**
     * 监听滚动事件
     */
    scrollHandler () {
        const _this = this;
        $(window).scroll( function () {
            const scrollT = $(window).scrollTop();
            const show = _this.state.show;
            let show1 = false;
            if (scrollT <= 500) {
                show1 = false;
            } else {
                show1 = true;
            }
            if (show !== show1) {
                _this.setState({show: show1});
            }
        });
    };

    /**
     * 监听鼠标enter事件
     * @param num
     */
    handleOnMouseEnter(num) {
        this.setState({currentMenu: num});
    };

    /**
     * 选择智慧物业菜单
     * @param num
     */
    handleChooseZHMenu(num) {
        this.setState({ZHMenu: num})
    };

    /**
     * 设置滚动条位置
     * @param num
     */
    handleScrollTop(num) {
        $(document).scrollTop(600 + (num - 1) * 800);
    }
}

export default prop=>(
    <Consumer>
        {
            props=>(
                <ProductService {...props} {...prop} />
            )
        }
    </Consumer>
)
//export default ProductService;